<template>
    <div class="payWord_content">
      <jm-head ref="head"></jm-head>
        <div class="payWord_menu">
            <!-- 设置 -->
            <div class="new_word" v-if = "firstIn">
                <h1>设置支付密码</h1>
                <p>使用余额支付需要设置支付密码，用于支付验证</p>
                <div class="word_input">
                    <van-password-input
                        :value="value"
                        :focused="showKeyboard"
                        @focus="showKeyboard = true"
                        :error-info="errorInfo"
                    />
                </div>
            </div>
            <!-- 确认密码 -->
            <div class="new_word" v-else>
                <h1>确认支付密码</h1>
                <p>请再次输入支付密码</p>
                <div class="word_input">
                    <van-password-input
                        :value="confirmValue"
                        :focused="showKeyboard"
                        @focus="showKeyboard = true"
                    />
                </div>
            </div>

        </div>
        <!-- 数字键盘 -->
        <van-number-keyboard
            :show="showKeyboard"
            @input="onInput"
            @delete="onDelete"
            @blur="showKeyboard = false"
        />
    </div>
</template>
<script>
    import Vue from 'vue'
    // import { PasswordInput, NumberKeyboard } from 'vant';
    import { setpayWord } from "@/api/user";
    import { Toast } from 'vant'
    import Vant from 'vant'
    import JmHead from '../head/head'

    Vue.use(Vant);
    export default {
        name: 'payWord',
        components: {
            JmHead
        },
        data () {
            return {
                value: '',
                password: '',
                confirmPassword: '',
                confirmValue: '',
                showKeyboard: false,
                errorInfo: '',
                firstIn: true,
                firstValue: ''
            }
        },
        methods: {
            onInput(key) {
                if (this.firstIn) {
                    this.inputFirst(key)
                } else {
                    this.inputSecond(key)
                }
            },

            inputFirst(key) {
                this.value = (this.value + key).slice(0, 6);
                if (this.value.length === 6) {
                    this.firstIn = false;
                }
            },

            inputSecond(key) {
                this.confirmValue = (this.confirmValue + key).slice(0, 6);
                if (this.confirmValue.length === 6) {
                    if(this.confirmValue != this.value ){
                        Toast.fail({message:'两次密码不一致,请重新输入', duration: 1000});
                        this.errorInfo = '两次密码不一致,请重新输入'
                        this.value = ''
                        this.confirmValue = ''
                        this.firstIn = true
                    } else {
                        this.setpayWord(this.value)
                    }
                }
            },

            onDelete() {
                if (this.firstIn) {
                  this.value = this.value.slice(0, this.value.length - 1);
                } else {
                  this.confirmValue = this.confirmValue.slice(0, this.confirmValue.length - 1);
                }
            },
            setpayWord(val){
                setpayWord({password_pay: val}).then(res => {
                    Toast.success({message: res.info, duration: 2000});
                    this.$router.go(-1)
                })
            }
        },
        activated() {
            this.firstIn = true
            this.value = ''
            this.confirmValue = ''
            this.errorInfo = ''
            this.$refs.head.setNavBarUrl()
        }
    }
</script>

<style lang="stylus" scoped>
    .payWord_content
        width 100%
        height 100vh
        overflow hidden
        background #ededed
        .payWord_menu
            width 100%
            overflow hidden
            position absolute
            top 30%
            -webkit-transform translateY(-50%)
            transform translateY(-50%)
            h1
                width 100%
                text-align center
                line-height 1.3
                // padding-bottom .3rem
                font-size .44rem
            p
                width 100%
                padding .3rem 0 1rem 0
                font-size .24rem
                text-align center
                color #858585
            .word_input

                margin 0 auto
                width 90%

                .van-password-input__security
                    border-radius 6px
                    height 1rem
                    border 1px solid #cccccc


    .van-password-input__security li
        background-color: #ededed;
    .van-hairline--left::after
        border 1px solid #cccccc

</style>
